<template>
  <div>
    <el-card id="search" class="box-card">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.name" placeholder="民宿名称" clearable/>
          <el-button type="primary" round icon="el-icon-search" @click="getAccommodationList">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 民宿展示 -->
    <el-card>
      <el-row>
        <el-col v-for="accommodation in accommodationList" :key="accommodation.accommodationId" :span="6">
          <div @click="goToDetail(accommodation)">
            <img v-if="accommodation.imageUrl" :src="accommodation.imageUrl" style="width: 100%; height: auto;">
            <div v-else class="placeholder" style="width: 100%; height: 200px; background-color: #f0f0f0;"/>
            <p style="text-align: center; margin-top: 10px; cursor: pointer;">{{ accommodation.name }}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[4, 5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import accommodationApi from '@/api/AccommodationManage'

export default {
  data() {
    return {
      // 图片展示
      // fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      fits: ['fill'],
      listimageUrl: '',
      // 图片url
      imageUrl: '',
      value: '',
      formLabelWidth: '160px',
      accommodationForm: {},
      dialogFormVisible: false,
      title: '',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 4
      },
      accommodationList: []
    }
  },
  created() {
    this.getAccommodationList()
  },
  methods: {
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getAccommodationList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getAccommodationList()
    },
    getAccommodationList() {
      accommodationApi.getAccommodationList(this.searchModel).then(response => {
        this.accommodationList = response.data.rows
        this.total = response.data.total
      })
    },
    goToDetail(accommodation) {
      // 跳转至民宿详情页面逻辑
      console.log('跳转至民宿详情页，民宿ID: ' + accommodation.accommodationId)
      this.$router.push({
        name: 'AccommodationDetail',
        params: {
          id: accommodation.accommodationId,
          imageUrl: accommodation.imageUrl,
          name: accommodation.name,
          price: accommodation.price,
          description: accommodation.description
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 200px;

}
</style>
